<template>
	<view>
		<view class="content">
			<view class="content_item">
				<view class="content_item_left">昵称</view>
				<view class="content_item_right">
					<input type="text" placeholder="未设置" @input="changeName" v-model="form.name" placeholder-style="color:#999" class="content_item_right_input" />
					<u-icon class="icon" name="arrow-right" color="#999999" size="12"></u-icon>
				</view>
			</view>
			<view class="content_item">
				<view class="content_item_left">真实姓名</view>
				<view class="content_item_right">
					<input type="text" @input="realnameclick" placeholder="未设置" v-model="form.realname" placeholder-style="color:#999" class="content_item_right_input" />
					<u-icon class="icon" name="arrow-right" color="#999999" size="12"></u-icon>
				</view>
			</view>
			<view class="content_item">
				<view class="content_item_left">身份证号</view>
				<view class="content_item_right">
					<input type="text" @input="id_numberclick" placeholder="未设置" v-model="form.id_number" placeholder-style="color:#999" class="content_item_right_input" />
					<u-icon class="icon" name="arrow-right" color="#999999" size="12"></u-icon>
				</view>
			</view>
			<view class="content_item" >
				<view class="content_item_left">出生日期</view>
				<view class="content_item_right"  @click="choose_data">
					<input type="text" placeholder="未设置" disabled v-model="form.birthday" placeholder-style="color:#999" class="content_item_right_input" />
					<u-icon class="icon" name="arrow-right" color="#999999" size="12"></u-icon>
				</view>
			</view>
			<view class="content_item" >
				<view class="content_item_left">性别</view>
				<view class="content_item_right"  @click="choose_sex">
					<input type="text" placeholder="未设置" disabled v-model="form.sex" placeholder-style="color:#999" class="content_item_right_input" />
					<u-icon class="icon" name="arrow-right" color="#999999" size="12"></u-icon>
				</view>
			</view>
			<!-- <view class="content_item">
				<view class="content_item_left">身份证号</view>
				<view class="content_item_right">
					<input type="text" @input="changeIdNumer" placeholder="未设置" v-model="form.id_number" placeholder-style="color:#999" class="content_item_right_input" />
					<u-icon class="icon" name="arrow-right" color="#999999" size="12"></u-icon>
				</view>
			</view> -->
			<view class="content_item">
				<view class="content_item_left">联系电话</view>
				<view class="content_item_right">
					<input type="text" @input="changeMobile" placeholder="未设置" v-model="form.mobile" placeholder-style="color:#999" class="content_item_right_input" />
					<u-icon class="icon" name="arrow-right" color="#999999" size="12"></u-icon>
				</view>
			</view>
			<view class="content_item">
				<view class="content_item_left">我的地址</view>
				<view class="content_item_right">
					<input @input="changeAddress" type="text" placeholder="未设置" v-model="form.address" placeholder-style="color:#999" class="content_item_right_input" />
					<u-icon class="icon" name="arrow-right" color="#999999" size="12"></u-icon>
				</view>
			</view>
			<!-- <view class="btn" @click="submit">确定</view> -->
			<!-- <view @click="zhuxiao" class="zhuxiao">
				注销
			</view> -->
		</view>
		<u-picker :show="show" :immediateChange="true" :columns="columns" :closeOnClickOverlay="true" @close="sexclose" @cancel="sexclose" @confirm="sexconfirm"></u-picker>
		<u-datetime-picker
			ref="datetimePicker"
			:show="dateshow"
			:closeOnClickOverlay="true"
			@close="dateclose"
			@cancel="dateclose"
			@confirm="dateconfirm"
			:minDate="-631180800000"
			:maxDate="maxDate"
			mode="date"
			:formatter="formatter"
		></u-datetime-picker>
	</view>
</template>

<script>
import { formatTimeDay } from '@/utils/util1.js';
import{register,userinfo,changeuserinfo} from '@/api/login.js'
import {
	log_off
} from '@/api/common.js'
export default {
	data() {
		return {
			form:{
				name:'',
				birthday:'',
				gender: '',//性别 0女 1男
				sex:'',//男女
				id_number:'',
				mobile:'',
				address:'',
			},
			maxDate:Date.parse(new Date()),
			dateshow:false,
			show:false,
			columns: [['女', '男']],
			
		}
	},
	onLoad() {
		this.getuserinfo()
	},
	onReady() {
		// 微信小程序需要用此写法
		this.$refs.datetimePicker.setFormatter(this.formatter);
	},
	methods: {
		changeName(){
			this.submit('name',this.form.name);
		},
		realnameclick(){
			this.submit('realname', this.form.realname);
		},
		id_numberclick(){
			this.submit('id_number', this.form.id_number);
		},
		changeIdNumer(){
			this.submit('id_number',this.form.id_number);
		},
		changeMobile(){
			this.submit('mobile',this.form.mobile);
		},
		changeAddress(){
			this.submit('address',this.form.address);
		},
		zhuxiao(){
			uni.showModal({
				title:'提示',
				content:'确认注销当前账号吗？',
				success:res=>{
					if(res.confirm){
						log_off().then(res=>{
							uni.showToast({
								title:'注销成功',
								icon:'none',
							})
							uni.clearStorageSync();
							setTimeout(()=>{
								uni.navigateBack({
									delta:1
								})
							},800)
						})
					}
				}
			})
		},
		choose_data() {
			this.dateshow = true;
		},
		dateclose() {
			this.dateshow = false;
		},
		dateconfirm(e) {
			let date = formatTimeDay(new Date(e.value));
			this.form.birthday = date; 
			this.submit('birthday',this.form.birthday);
			this.dateshow = false;
		},
		choose_sex() {
			this.show = true;
		},
		sexclose() {
			this.show = false;
		},
		sexconfirm(e) {
			console.log(e);
			this.form.gender = e.indexs[0];
			this.form.sex = e.value[0];
			this.submit('gender',this.form.gender);
			this.show = false;
		},
		formatter(type, value) {
			if (type === 'year') {
				return `${value}年`;
			}
			if (type === 'month') {
				return `${value}月`;
			}
			if (type === 'day') {
				return `${value}日`;
			}
			return value;
		},
		choose_img(){
			let t = this
			uni.chooseImage({
				count:1,
				success(res) {
					console.log(res)
					let path = res.tempFilePaths[0]
					t.form.head_img = path
				}
			})
		},
		picker_index(num){
			this.show = true
			this.pkindex = num
			if(num == 1)this.$set(this.columns,0,this.year) //年限
			if(num == 2)this.$set(this.columns,0,this.speciality)//类别
			if(num == 3)this.$set(this.columns,0,this.HospitaLevel)//医院等级
			if(num == 4)this.$set(this.columns,0,this.Department)//科室
		},
		close(){
			this.show = false
		},
		confirm(e){
			if(this.pkindex == 1)this.form.year = e.value[0]
			if(this.pkindex == 2)this.form.speciality = e.value[0]
			if(this.pkindex == 3)this.form.HospitaLevel = e.value[0]
			if(this.pkindex == 4)this.form.Department = e.value[0]
			this.show = false
		},
		choose_time(num){
			this.time_index = num
			this.show_time = true
		},
		serve_close(){
			this.show_time = false
		},
		serve_confirm(e){
			if(this.time_index == 1)this.form.serverStime = e.value
			if(this.time_index == 2)this.form.serverEtime = e.value
			this.show_time = false
		},
		go_userCard(){
			uni.navigateTo({
				url:'/pages/EditUserInfo/BusinessCard/BusinessCard'
			})
		},
		getuserinfo(){
			let t = this
			userinfo().then(res=>{
				let data = res.data
				t.form = res.data
				if(t.form.gender == 0){
					t.form.sex = '女'
				}else{
					t.form.sex = '男'
				}
				
			})
		},
		submit(key,value) {
			changeuserinfo({key,value}).then(res=>{
				console.log(res)
				// if(res.code == 200001){
				// 	let userinfo = uni.getStorageSync('userinfo')
				// 	userinfo.sex = t.form.gender
				// 	uni.setStorageSync('userinfo',userinfo)
				// 	uni.showToast({
				// 		title:'修改成功',
				// 		icon:'none'
				// 	})
				// 	setTimeout(()=>{
				// 		uni.navigateBack()
				// 	},1500)
				// }
			})
		}
	}
}
</script>

<style>
.content {
	padding: 20rpx 30rpx;
	box-sizing: border-box;
	padding-bottom: 100rpx;
}
.content_item {
	padding: 30rpx 0;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1rpx solid #f4f4f4;
}
.content_item_right {
	display: flex;
	align-items: center;
}
.content_item_right_img {
	width: 82rpx;
	height: 82rpx;
	border-radius: 50%;
	background-color: #999;
}
.icon {
	margin-left: 24rpx;
}
.content_item_right_input {
	width: 400rpx;
	color: #666;
	text-align: right;
	font-family: Alibaba PuHuiTi 2;
	font-size: 28rpx;
	font-weight: 400;
}
.content_item_right_input1 {
	width: 150rpx;
	color: #666;
	text-align: center;
	font-family: Alibaba PuHuiTi 2;
	font-size: 28rpx;
	font-weight: 400;
}
.dd {
	color: #333;
	font-family: Alibaba PuHuiTi 2;
	font-size: 28rpx;
	font-weight: 400;
}
.zhuxiao{
	color: #DF5046;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 28rpx;
	font-weight: 400;
	margin-top: 58rpx;
	text-align: center;
}
.btn {
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	color: #fff;
	font-family: Alibaba PuHuiTi 2;
	font-size: 30rpx;
	font-weight: 400;
	border-radius: 68rpx;
	background: #0165fb;
	margin-top: 200rpx;
}
</style>
